import React, { useState, useEffect } from 'react'
import { apiConfig } from '../../apiutils/api.js'

// 示例：使用 @houduan/ 别名导入后端配置
// import backendConfig from '@houduan/config.js'

const BackendIntegration = () => {
  const [status, setStatus] = useState('未连接')
  const [config, setConfig] = useState(null)

  useEffect(() => {
    // 示例：获取后端配置
    const fetchBackendConfig = async () => {
      try {
        // 这里可以动态导入后端配置
        // const backendConfig = await import('@houduan/config.js')
        // setConfig(backendConfig.default)
        
        setStatus('已连接')
      } catch (error) {
        console.error('获取后端配置失败:', error)
        setStatus('连接失败')
      }
    }

    fetchBackendConfig()
  }, [])

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h3>后端集成示例</h3>
      <p><strong>API 基础 URL:</strong> {apiConfig.baseURL}</p>
      <p><strong>连接状态:</strong> {status}</p>
      <p><strong>超时设置:</strong> {apiConfig.timeout}ms</p>
      
      <div style={{ marginTop: '20px' }}>
        <h4>使用 @houduan/ 别名的好处：</h4>
        <ul>
          <li>简化导入路径</li>
          <li>避免相对路径的复杂性</li>
          <li>便于维护和重构</li>
          <li>支持跨项目模块共享</li>
        </ul>
      </div>
    </div>
  )
}

export default BackendIntegration 